<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title data-lang="UseVue">Vue Sample</title>
  <link rel="icon" href="../../../../favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="../../../assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../../assets/css/style.css">
  <link rel="stylesheet" href="./index.css">
  <script src="../../../assets/js/express_sdk/ZegoExpressWebRTC.js"></script>
</head>

<body class="fix-sidebar card-no-border">
  <div class="preloader">
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
    </svg>
  </div>

  <div class="container main-wrapper">
    <!-- <div class="row"> -->


    <div class="page-wrapper" id="page-wrapper">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12 col-lg-6 preview-wrapper">
            <div class="preview-roomInfo">
              RoomID:&nbsp;<div id="roomInfo-id" class="m-r-10">{{roomID}}</div>
              RoomState:&nbsp;<div id="roomInfo-state">
                <div class="success-svg" id="roomStateSuccessSvg" v-show="connectStatus=='CONNECTED'"
                  style="display: inline-block;">
                  <svg class="ft-green-tick" xmlns="http://www.w3.org/2000/svg" height="10" width="10"
                    viewBox="0 0 48 48" aria-hidden="true">
                    <circle class="circle" fill="#5bb543" cx="24" cy="24" r="22" />
                  </svg>
                </div>
                <div class="error-svg" id="roomStateErrorSvg" v-show="connectStatus=='DISCONNECTED'"
                  style="display: inline-block;">
                  <svg class="ft-green-tick" xmlns="http://www.w3.org/2000/svg" height="10" width="10"
                    viewBox="0 0 48 48" aria-hidden="true">
                    <circle class="circle" fill="#5bb543" cx="24" cy="24" r="22" />
                  </svg>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="preview-pushlishInfo col-lg-12 col-6">
                <div class="pushlishInfo-title">
                  <span data-lang="Preview">Preview</span>&emsp;Publish StreamID: <span
                    id="pushlishInfo-id">{{publishInfoStreamID}}</span>
                </div>
                <div class="preview-content">
                  <video v-if="version<`2.17.0`" controls id="publishVideo" ref="publishVideo" autoplay playsinline :muted="true"
                    :class="(mirrorVal=='onlyPreview' || mirrorVal=='both')?'mirror':''"></video>
                  <div v-else id="localVideo"></div>
                </div>
              </div>
              <div class="preview-playInfo m-t-10 col-lg-12 col-6">
                <div class="pushlishInfo-title">
                  <span data-lang="PlayStream">Play Stream</span>&emsp;StreamID: <span
                    id="playInfo-id">{{playInfoStreamID}}</span>
                </div>
                <div class="preview-content">
                  <video v-if="version<`2.17.0`" controls id="playVideo" ref="playVideo" autoplay playsinline
                    :class="(mirrorVal=='onlyPlay' || mirrorVal=='both')?'mirror':''"></video>
                  <div v-else id="remoteVideo"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-lg-6 action-wrapper">
            <div class="action-step">
              <div class="action-title">
                Step1&emsp;<span class="action-info">Create ZegoExpressEngine</span>
              </div>
              <div class="btn-wrapper">
                <button @click="createZegoExpressEngineOption" type="button" class="btn-outline-info btn cuBtn"
                  title="new ZegoExpressEngine()">
                  <div class="success-svg" id="createSuccessSvg" v-show="createSuccessSvgStatus"
                    style="display: inline-block;">
                    <svg class="ft-green-tick" xmlns="http://www.w3.org/2000/svg" height=15 width="15"
                      viewBox="0 0 48 48" aria-hidden="true">
                      <circle class="circle" fill="#5bb543" cx="24" cy="24" r="22" />
                      <path class="tick" fill="none" stroke="#FFF" stroke-width="6" stroke-linecap="round"
                        stroke-linejoin="round" stroke-miterlimit="10" d="M14 27l5.917 4.917L34 17" />
                    </svg>
                  </div>
                  Create Engine
                </button>
              </div>
            </div>
            <div class="action-step">
              <div class="action-title">
                Step2&emsp;<span class="action-info">Test Compatiblity</span>
              </div>
              <div class="btn-wrapper">
                <button @click="checkSystemRequire" type="button"
                  :class="[checkSystemRequireStatus=='ERROR'?'btn-outline-danger':'btn-outline-info' ,'btn' ,'cuBtn']"
                  title="checkSystemRequirements()">
                  <div class="success-svg" id="checkSuccessSvg" v-show="checkSystemRequireStatus=='SUCCESS'"
                    style="display: inline-block;">
                    <svg class="ft-green-tick" xmlns="http://www.w3.org/2000/svg" height="15" width="15"
                      viewBox="0 0 48 48" aria-hidden="true">
                      <circle class="circle" fill="#5bb543" cx="24" cy="24" r="22" />
                      <path class="tick" fill="none" stroke="#FFF" stroke-width="6" stroke-linecap="round"
                        stroke-linejoin="round" stroke-miterlimit="10" d="M14 27l5.917 4.917L34 17" />
                    </svg>
                  </div>
                  <div class="error-svg" id="checkErrorSvg" v-show="checkSystemRequireStatus=='ERROR'"
                    style="display: inline-block;">
                    <svg class="ft-green-tick" xmlns="http://www.w3.org/2000/svg" height="15" width="15"
                      viewBox="0 0 48 48" aria-hidden="true">
                      <circle class="circle" fill="#5bb543" cx="24" cy="24" r="22" />
                      <path class="tick" fill="none" stroke="#FFF" stroke-width="6" stroke-linecap="round"
                        stroke-linejoin="round" stroke-miterlimit="10" d="M14 14 34 34 M34 14 14 34" />
                    </svg>
                  </div>
                  <div class="warn-svg" id="checkWarnSvg" style="display: none;">
                    <svg t="1617876217862" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="8340" width="15" height="15">
                      <circle class="circle" fill="#5bb543" cx="512" cy="512" r="510" />
                      <path class="tick" fill="none" stroke="#FFF" stroke-width="6" stroke-linecap="round"
                        d="M512 736.1m-63 0a63 63 0 1 0 126 0 63 63 0 1 0-126 0Z" fill="#FFFFFF" p-id="8344"></path>
                      <path class="tick" fill="none" stroke="#FFF" stroke-width="6" stroke-linecap="round"
                        stroke-miterlimit="10"
                        d="M512 611.8s63-220.5 63-306.3S549.5 204 512 204s-63 15.8-63 101.5 63 306.3 63 306.3z"></path>
                    </svg>
                  </div>
                  Test Compatiblity
                </button>
              </div>
            </div>
            <div class="action-step">
              <div class="action-title">
                Step3&emsp;<span class="action-info">Login Room</span>
              </div>
              <div class="action-content">
                <div class="action-room font-14">
                  <div class="action-roomId ">
                    RoomID 
                    <div class="icon-question">?
                      <div class="pop-box" data-lang="RoomIDDesc">Tooltip text</div>
                    </div>
                    <input type="text" class="w-70" id="RoomID"  v-model="roomID" :disabled="isLogin"/>
                  </div>
                  <div class="action-userName">
                    UserID 
                    <div class="icon-question">?
                      <div class="pop-box">
                        <span data-lang="UserIDDesc"></span>
                      </div>
                    </div>
                    <input type="text" class="w-70" id="UserID"  v-model="userID"  :disabled="isLogin"/>
                  </div>
                  <div class="action-token">
                    Token 
                    <div class="icon-question">?
                      <div class="pop-box">
                        <span data-lang="TokenDesc"></span>
                        <a href="https://console.zego.im"  data-lang="ApplyToken" target="_blank"></a>
                      </div>
                    </div>
                    <input type="text" class="w-70" id="Token" v-model="token"  />
                  </div>
                </div>
                <!-- <button id="LoginRoom" type="button" class="btn-info btn cuBtn">Login Room</button> -->
                <button id="LoginRoom" class="play-pause-button" title="loginRoom()" @click="loginRoomOption">
                  <div class="success-svg m-r-5" id="loginSuccessSvg" v-show="isLogin" style="display: inline-block;">
                    <svg class="ft-green-tick" xmlns="http://www.w3.org/2000/svg" height="15" width="15"
                      viewBox="0 0 48 48" aria-hidden="true">
                      <circle class="circle" fill="#5bb543" cx="24" cy="24" r="22" />
                      <path class="tick" fill="none" stroke="#FFF" stroke-width="6" stroke-linecap="round"
                        stroke-linejoin="round" stroke-miterlimit="10" d="M14 27l5.917 4.917L34 17" />
                    </svg>
                  </div>
                  Login Room
                </button>
              </div>
            </div>
            <div class="action-step">
              <div class="action-title">
                Step4&emsp;<span class="action-info">Start Publishing Stream</span>
                <div class="action-content">
                  <div class="publish-setting m-t-10">
                    <div class="action-input font-14 m-b-15">
                      Publish StreamID <input type="text" id="PublishID" v-model="streamID"
                        :disabled="publishStreamStatus" />
                    </div>
                    <div class="font-12 publish-check m-b-15">
                      <div class="check-wrappre m-r-5">
                        <label class="form-check-label m-r-5" for="Camera" data-lang="Camera">Camera</label>
                        <input class="check-input" type="checkbox" v-model="cameraCheckStatus" id="Camera"
                          :disabled="publishStreamStatus">
                      </div>
                      <div class="check-wrappre">
                        <label class="form-check-label m-r-5" for="Microphone" data-lang="Microphone">Microphone</label>
                        <input class="check-input" type="checkbox" v-model="microphoneCheckStatus" id="Microphone"
                          :disabled="publishStreamStatus">
                      </div>
                    </div>
                  </div>
                  <!-- <button id="startPublishing" type="button" class="btn-info btn cuBtn">Start
                    Publishing</button> -->
                  <button id="startPublishing" @click="startPublishing" class="play-pause-button"
                    title="createStream() / startPublishingStream()">
                    <div class="success-svg m-r-5" id="publishSuccessSvg" v-show="publishStreamStatus"
                      style="display: inline-block;">
                      <svg class="ft-green-tick" xmlns="http://www.w3.org/2000/svg" height="15" width="15"
                        viewBox="0 0 48 48" aria-hidden="true">
                        <circle class="circle" fill="#5bb543" cx="24" cy="24" r="22" />
                        <path class="tick" fill="none" stroke="#FFF" stroke-width="6" stroke-linecap="round"
                          stroke-linejoin="round" stroke-miterlimit="10" d="M14 27l5.917 4.917L34 17" />
                      </svg>
                    </div>Start Publishing
                  </button>
                  <div class="publish-setting m-t-10 m-b-10">
                    <div class="font-12 select-wrapper">
                      <span data-lang="Mirror">Mirror</span>
                      <select class="form-control form-control-sm m-l-5" id="Mirror" v-model="mirrorVal"
                        :disabled="publishStreamStatus">
                        <option value="none">none</option>
                        <option value="onlyPreview">onlyPreview</option>
                        <option value="onlyPlay">onlyPlay</option>
                        <option value="both">both</option>
                      </select>
                    </div>
                    <div class="font-12 select-wrapper f-b-7">
                      <span data-lang="CameraSwitch">Camera Switch</span>
                      <select class="form-control form-control-sm m-l-5" id="CameraDevices" v-model="cameraDevicesVal"
                        :disabled="publishStreamStatus">
                        <option :value="item.deviceID" v-for="item in videoDeviceList">{{item.deviceName}}</option>
                      </select>
                    </div>
                  </div>
                  <div class="font-12 select-wrapper">
                    <span data-lang="MicrophoneSwitch">Microphone Switch</span>
                    <select class="form-control form-control-sm m-l-5" id="MicrophoneDevices"
                      :disabled="!microphoneCheckStatus" @change="changeAudioDevices" v-model="microphoneDevicesVal">
                      <option :value="item.deviceID" v-for="item in audioDeviceList">{{item.deviceName}}</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
            <div class="action-step">
              <div class="action-title">
                Step5&emsp;<span class="action-info">Start Play Stream</span>
                <div class="action-content">
                  <div class="publish-setting m-t-5">
                    <div class="action-input font-14 m-b-15">
                      Play StreamID <input type="text" id="PlayID" v-model="playStreamID"
                        :disabled="playStreamStatus" />
                    </div>
                    <div class="font-12 publish-check m-b-15">
                      <div class="check-wrappre m-r-5">
                        <label class="form-check-label m-r-5" for="Video" data-lang="Video">Video</label>
                        <input class="check-input" type="checkbox" id="Video" v-model="videoCheckStatus"
                          :disabled="playStreamStatus">
                      </div>
                      <div class="check-wrappre">
                        <label class="form-check-label m-r-5" for="Audio" data-lang="Audio">Audio</label>
                        <input class="check-input" type="checkbox" id="Audio" v-model="audioCheckStatus"
                          :disabled="playStreamStatus">
                      </div>
                    </div>
                  </div>
                  <!-- <button id="startPlaying" type="button" class="btn-info btn cuBtn">Start Playing</button> -->
                  <button id="startPlaying" class="play-pause-button" @click="startPlaying"
                    title="startPlayingStream()">
                    <div class="success-svg m-r-5" id="playSuccessSvg" v-show="playStreamStatus"
                      style="display: inline-block;">
                      <svg class="ft-green-tick" xmlns="http://www.w3.org/2000/svg" height="15" width="15"
                        viewBox="0 0 48 48" aria-hidden="true">
                        <circle class="circle" fill="#5bb543" cx="24" cy="24" r="22" />
                        <path class="tick" fill="none" stroke="#FFF" stroke-width="6" stroke-linecap="round"
                          stroke-linejoin="round" stroke-miterlimit="10" d="M14 27l5.917 4.917L34 17" />
                      </svg>
                    </div>Start Playing
                  </button>
                </div>
              </div>
            </div>
            <div class="action-step">
              <div class="action-content">
                <button id="reset" type="button" @click="reset" class="btn-danger btn cuBtn">Reset</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <ul class="goToDoc">
        <li>
          <span data-lang="HelpDocsVideoCodec"> Web 端视频编码默认使用 VP8。如果需要体验和其他端互通或者转推 CDN 功能，请在调试与配置页面修改为 H.264。</span>
          &nbsp;
          <a href="../../DebugAndConfig/LogAndVersionAndDebug/index.html" data-lang="HelpSettingsPage" target="_blank">
            点击修改 </a>
        </li>
        <li>
          <span data-lang="MoreDocs">更多文档，请跳转至即构 </span> &nbsp;
          <a href="https://doc-zh.zego.im/article/7638" data-lang="HelpDocs" target="_blank"> 帮助文档 </a>
        </li>
      </ul>
    </div>
    <!-- </div> -->
  </div>

  <script src="../../../assets/js/left-menu.js"></script>
  <script src="../../../assets/js/jquery.min.js"></script>
  <script src="../../../assets/js/jquery.i18n.properties.min.js"></script>
  <script src="../../../assets/js/metisMenu.min.js"></script>
  <script src="../../../assets/js/jquery.slimscroll.min.js"></script>
  <script src="../../../assets/js/bootstrap.min.js"></script>
  <script src="../../../assets/js/vconsole.min.js"></script>
  <script src="../../../assets/js/custom.js"></script>
  <script src="../../../KeyCenter.js"></script>
  <script src="../../../assets/js/vue.min.js"></script>
  <script src="index.js"></script>
</body>

</html>